<template>
  <u-popup :show="show" mode="top" @close="closeHandle" bgColor="transparent">
    <view class="mbti-modal-wrapper" @click.stop="closeHandle">
      <view class="img-bg-wrapper">
        <image class="img-bg" :src="staticImgs.bgD" mode=""></image>
      </view>

      <view class="placehoder-box"></view>
      <view class="modal-position" @click.stop="closeHandle">
        <view class="modal-con">
     
          
          <view class="text-1"
            :class="{hideShow:showhide}"
            >{{mbtiRes}}</view>
          </view>

          <view class="bottom-box" @click.stop="confirmHandle">
            {{sclInfo.newOriginalPrice}}元测
            
            <view class="abs-user-num">
              已有{{viewNumStr}}人购买
            </view>
            <view class="abs-icon-img">
              <image class="img" :src="staticImgs.tipImg" mode=""></image>
            </view>
          </view>
          <view class="other-text">
            28题速测MBTI
          </view>

        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'
  import { debounce } from 'lodash'
  export default {
    props: {
      discountNum: {
        type: Number,
        default: 8,
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        show: false,
        staticImgs: {
          bgD: this.imgBaseURL + '/scl/home/modal-mbti-bg-v3.png',
          tipImg:this.imgBaseURL + '/scl/home/modal-mbti-tip-img.png',
          // btnImg: this.imgBaseURL + '/scl/home/btn-img.png',
          close: this.imgBaseURL + '/scl/home/close-icon.png',
          // conBg: this.imgBaseURL + '/scl/home/modal-con-bg.png',
        },
        randomArr:[
          ["I","E"],
          ["N","S"],
          ["F","T"],
          ["P","J"]
        ],
        sclId: '1796362013887135750',
        sclInfo: {},
        pageLoading:false,
        showhide:false,
        setInter1:'', 
        mbtiRes:'',
      }
    },
    watch: {
      visible: {
        async handler(val) {
          this.mbtiRes = this.randomArr.map(item=>{
            return item[Math.floor(Math.random()*2)]
          }).join('')
          clearInterval(this.setInter1)
          if (val) {
            const {data:dRes} = await this.$u.api.getSclDictCode({
              code:'mbti'
            })
            this.sclId = dRes.data
            console.log(dRes,'===========dRes')
            await this.getSclInfo()
            this.setInter1=setInterval(()=>{
             this.showhide = true
             // setTimeout(()=>{
              this.mbtiRes = this.randomArr.map(item=>{
                return item[Math.floor(Math.random()*2)]
              }).join('')
              
              this.showhide = false
             // },600)
           },1000)
          }
          this.show = val
        },
        immediate: true
      },
    },
    computed:{
      viewNumStr(){
        //大于1万则显示1w，例子：1.2w
        if(this.sclInfo.collectNums > 10000){
          return `${(this.sclInfo.collectNums / 10000).toFixed(1)}w`
        } else {
          return this.sclInfo.collectNums
        }
      }
    },
    methods: {
      async getSclInfo() {
        this.$u.api.addLog({
          sclId: this.sclId,
          sourseType: 24
        })
        const res = await this.$u.api.getSclInfo({
          sclId: this.sclId
        })
        this.sclInfo = res.data.data || {}
      },
      toScl() {
        this.$u.api.addLog({
          sclId: this.sclId,
          sourseType: 23
        })

        uni.navigateTo({
          url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
            sclId: this.sclId
          })
        })
      },
      confirmHandle:debounce(async function(type) {
        
        if(this.pageLoading == true){
          return false
        }

        let that = this;
        const submitForm = removeEmptyProperty({
          price: this.sclInfo.newOriginalPrice,
          orderType: '7',
          sclId: this.sclId,
          isAdditional: 'N'
        })
        uni.showLoading()
        this.pageLoading = true
        const {data:tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        this.$u.api.orderPay(submitForm).then(res => {
          if (res.data.code == 200 && that.pageLoading) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$emit('confirm')
                that.toScl()
                that.pageLoading = false
              },
              fail: function(err) {
                console.log(err, '测评支付2')
                that.$showToast('支付取消');
                that.pageLoading = false
              }
            });
          } else {
            that.$showToast(res.data.message);
            this.pageLoading = false
          }
        }).catch(() => {
          this.pageLoading = false
        }).finally(() => {
          setTimeout(()=>{
            this.$emit('close')
            uni.hideLoading()
          },300)
        })
        
      },500),
      closeHandle() {
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mbti-modal-wrapper {
    position: relative;


.hideShow{
		transition: all 0.4s;
		transform: inherit;
    // 		opacity: 0;
    //     		animation-name: mymove;
    // animation-delay: 0s;
    // animation-duration: 2.6s;
    // animation-iteration-count: 1;
		// animation: mymove 2.6s 1;
	}
	@keyframes mymove {
		0%{
			opacity: 0;
		}
		10%{
			opacity: 1;
		}
		90%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}



    .img-bg-wrapper {
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 999;
      top: 10vh;
      left: 0;
      right: 0;

      .img-bg {
        // width: 704rpx;
        // height: 794rpx;
        width: 750rpx;
        height: 1150rpx;
        margin: auto;
      }
    }

    .placehoder-box {
      height: 898rpx;
      width: 750rpx;
    }

    .modal-position {
      position: absolute;
      display: flex;
      justify-content: center;
      flex-direction: column;
      top: 10vh;
      left: 0;
      right: 0;
      z-index: 999;

      .modal-con {
        flex-direction: column;
        align-items: center;
        .text-1 {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 80rpx;
          color: #7BB2D9;
          text-align: center;
          font-style: normal;
          margin-top: 604rpx;          
        }


      }

      .bottom-box {
        width: 418rpx;
        height: 83rpx;
        background: #469479;
        border-radius: 42rpx;
        
        margin: auto;
        margin-top: 24rpx;

        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 40rpx;
        color: #FFFFFF;
        line-height: 83rpx;
        text-align: center;
        font-style: normal;
        
        position: relative;
        
        
        .abs-user-num{
          position: absolute;
          right: 6rpx;
          top: -26rpx;
          
          width: 180rpx;
          height: 40rpx;
          background: #FFFFFF;
          border-radius: 15rpx 0rpx 15rpx 0rpx;
          border: 2rpx solid #216C52;
          
          line-height: 40rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #216C52;
          // line-height: 28rpx;
          text-align: center;
          font-style: normal;
          
        }
        
        .abs-icon-img{
          position: absolute;
          left: -25rpx;
          top: -40rpx;
          
          width: 104rpx;
          height: 158rpx;
          
          .img{
            width: 100%;
            height: 100%;
            box-shadow: none;
          }
        }

      }

      .other-text{
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #6E9AC4;
        //line-height: 40rpx;
        text-align: center;
        font-style: normal;
        
        margin-top: 14rpx;
      }


    }


    .close-icon {
      position: absolute;
      right: 70rpx;
      top: 350rpx;
      width: 50rpx;
      height: 50rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

  }
</style>